<template>
	<view class="">
		<NavBar title="分店管理" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="main">
			<view class="main_header flex_both m_b_32">
				<view class="">
					<text class="f_30_0_b">我的分店</text>
				</view>
				<view class="main_header_btn" @click="onShowPopup">
					<view class="m_b_10">
						<text class="f_24_f">
							邀请绑定
						</text>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" :style="{height: contentHeight + 'rpx'}" :refresher-threshold="100"
				@scrolltolower="scrolltolowerFun" refresher-enabled="true" refresher-default-style="none">
				<view class="main_list">
					<view class="main_item m_b_24" v-for="(item,index) in storeList" :key="index"
						@click="toDetail(item)">
						<view class="main_item_row1 flex_both m_b_42">
							<view class="flex">
								<view class="m_r_24">
									<up-image :show-loading="true" :src="item.shop_images.split(',')[0]" width="62rpx"
										height="62rpx" radius="6"></up-image>
								</view>
								<view class="">
									<text class="f_30_0_b">
										{{item.shop_name}}
									</text>
								</view>
							</view>
							<view class="m_b_4">
								<text class="f_24_0" style="color: #747474;">
									进店 >
								</text>
							</view>
						</view>
						<view class="main_item_row2 flex_both">
							<view class="main_item_row2_btn1" @click.stop="toXs(item)">
								<text class="f_24_0" style="color: #4694E4;">
									销售数据
								</text>
							</view>
							<view class="main_item_row2_btn2" @click.stop="toJs(item)">
								<text class="f_24_0" style="color: #F93F1A;">
									结算数据
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="empty_box" v-if="!loadShow &&storeList.length ==  0">
					<view class="">
						<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</up-empty>
					</view>
				</view>
				<view class="loading_box m_t_32 " style="padding-bottom: 32rpx;" v-if="loadShow">
					{{ loadMessage }}
				</view>
			</scroll-view>
		</view>
		<view class="">
			<up-popup :show="popupShow" mode="center" round="10" :safeAreaInsetBottom="false">
				<view class="popup_box">
					<view class="popup_title m_b_46">
						<text class="f_30_0_b">
							邀请绑定
						</text>
					</view>
					<view class="popup_close" @click="onPopupClose">
						<up-icon name="close" color="#000000" size="17"></up-icon>
					</view>
					<view class="m_b_80">
						<up-input placeholder="请输入手机号" type="number" border="surround" v-model="yqCode"
							inputAlign="left" fontSize="24rpx" :customStyle="{borderColor:'#000000'}"></up-input>
					</view>
					<view class="popup_btn" @click="onPopupOk">
						<view class="m_b_10">
							<text class="f_24_f">
								确定
							</text>
						</view>
					</view>
				</view>
			</up-popup>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 76}rpx)`
			}
		});
		getChildShop()
	})
	// 审核消息列表
	const page = ref(1)
	const loadShow = ref(false)
	const loadMessage = ref('加载中')
	const scrolltolowerFun = () => {
		if (loadShow.value) return
		page.value = ++page.value;
		loadShow.value = true;
		setTimeout(() => {
			getChildShop()
		}, 1000)
	}
	// 评价列表 取前两条
	const storeList = ref([])
	const getChildShop = async () => {
		if (loadMessage.value == '没有更多了') {
			loadShow.value = true;
			setTimeout(() => {
				loadShow.value = false;
			}, 200)
			return
		}
		let res = await proxy.$http('my.getChildShop', { page: page.value })
		let data = res.data
		if (res.code == 1) {
			if (data.length == 0) {
				loadMessage.value = "没有更多了"
			} else {
				storeList.value.push(...data)
			}
		} else {
			loadMessage.value = "加载出错"
		}
		setTimeout(() => {
			loadShow.value = false;
		}, 200)
	}

	// 弹窗
	const popupShow = ref(false)
	const yqCode = ref()
	const onShowPopup = () => {
		popupShow.value = true
	}
	const onPopupClose = () => {
		popupShow.value = false
	}
	const onPopupOk = () => {
		if (!yqCode.value) {
			uni.$u.toast('手机号不能为空')
			return
		}
		inviteShop()
		popupShow.value = false
	}
	// 邀请绑定
	const inviteShop = async () => {
		let res = await proxy.$http('my.inviteShop', { phone: yqCode.value })
		if (res.code == 1) {
			uni.$u.toast('邀请成功')
			setTimeout(() => {
				loadMessage.value = '加载中'
				page.value = 1
				storeList.value = []
				getChildShop()
			}, 800)
		}
	}

	const toXs = (e) => {
		uni.navigateTo({
			url: `/pages/my/saleData?id=${e.shop_id}`
		})
	}
	const toJs = (e) => {
		uni.navigateTo({
			url: `/pages/my/settlementData?id=${e.shop_id}`
		})
	}
	const toDetail = (e) => {
		uni.navigateTo({
			url: `/pages/index/storeDetail?id=${e.shop_id}`
		})
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.main {
			.main_header {
				.main_header_btn {
					width: 176rpx;
					height: 53rpx;
					background: #F93F1A;
					border-radius: 27rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.main_list {
				.main_item {
					padding: 24rpx;
					padding-bottom: 16rpx;
					background: #FFFFFF;
					box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
					border-radius: 6rpx;

					.main_item_row2 {
						.main_item_row2_btn1 {
							width: 304rpx;
							height: 62rpx;
							background: #FFFFFF;
							border-radius: 10rpx;
							border: 2rpx solid #4694E4;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.main_item_row2_btn2 {
							width: 304rpx;
							height: 62rpx;
							background: #FFFFFF;
							border-radius: 10rpx;
							border: 2rpx solid #F77F3E;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}

		.popup_box {
			width: 486rpx;
			height: 291rpx;
			padding: 46rpx;
			padding-top: 36rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			position: relative;

			.popup_title {
				text-align: center;
			}

			.popup_close {
				position: absolute;
				top: 18rpx;
				right: 18rpx;
				padding: 6rpx;
			}

			.popup_btn {
				margin: 0 auto;
				width: 261rpx;
				height: 63rpx;
				background: #F93F1A;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>